import React, {useCallback, useState, useEffect} from 'react';
import {
  View,
  StyleSheet,
  Text,
  NativeModules,
  Pressable,
  TextInput,
  Keyboard,
  Alert,
} from 'react-native';
import Colors from '../../utils/Colors';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import PatIcon from '../base/PatIcon';
import {http, api} from '../../http';

const HEIGHT = NativeModules.StatusBarManager.HEIGHT;

const SearchTop = ({getSearchData}) => {
  const {t} = useTranslation();
  const navigation = useNavigation();
  const [value, setValue] = useState('');
  const cancelAction = useCallback(() => {
    navigation.goBack();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const clearAction = useCallback(() => {
    setValue('');
  }, []);
  const onChangeText = useCallback(val => {
    setValue(val);
    http.get(api.HOT_SEARCH, {words: val}).then(res => {
      if (res) {
        if (res) {
          getSearchData(res);
        }
      }
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const onEnter = useCallback(() => {
    Alert.alert('Alert Title', 'My Alert Msg', [
      {
        text: 'Cancel',
        style: 'cancel',
      },
      {
        text: 'OK',
        onPress: () => console.log('OK Pressed'),
      },
    ]);
    console.log(value, 'onEnter....');
    http.get(api.SEARCH_FILTERS, {keyword: value}).then(res => {
      if (res) {
        if (res) {
          // 处理搜索结果
          // console.log(res);
        }
      }
    });
  }, [value]);
  useEffect(() => {
    onChangeText('');
    Keyboard.addListener('keyboardDidHide', onEnter);
    return () => {
      Keyboard.removeAllListeners('keyboardDidHide', onEnter);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  console.log(value);
  return (
    <View style={styles.searchTop}>
      <View style={styles.searchInputBox}>
        <PatIcon name="search2" size={16} color={Colors.patFontGray} />
        <TextInput
          style={styles.input}
          value={value}
          placeholder={t('common.looking')}
          onChangeText={onChangeText}
        />
        <Pressable
          onPress={clearAction}
          hitSlop={10} // 扩大距离
          RippleConfig={{
            color: Colors.white, // 波纹颜色
            borderless: false, // 是否包含边框
            radius: 10, //波纹半径
          }}>
          {value !== '' ? (
            <PatIcon name="close-circle" size={16} color={Colors.patFontGray} />
          ) : null}
        </Pressable>
      </View>
      <Pressable
        onPress={cancelAction}
        style={styles.cancelBox}
        hitSlop={10} // 扩大距离
        RippleConfig={{
          color: Colors.white, // 波纹颜色
          borderless: false, // 是否包含边框
          radius: 10, //波纹半径
        }}>
        <Text style={styles.cancel}>{t('common.cancel')}</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  searchTop: {
    paddingTop: HEIGHT,
    height: 40 + HEIGHT,
    width: '100%',
    backgroundColor: Colors.width,
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
    paddingLeft: 10,
    paddingRight: 10,
  },
  searchInputBox: {
    flex: 1,
    height: 30,
    paddingLeft: 10,
    paddingRight: 10,
    backgroundColor: Colors.patBg,
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'center',
    flexDirection: 'row',
    borderRadius: 10,
  },
  input: {
    flex: 1,
    height: 40,
    fontSize: 14,
    borderWidth: 0,
    marginLeft: 10,
    marginRight: 10,
    borderColor: Colors.patFontColor,
  },
  cancel: {
    marginLeft: 15,
    color: Colors.patFontColor,
    fontSize: 16,
  },
});

export default SearchTop;
